<template>
  <section id="products" class="products">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">SKILLITH产品服务</h2>
        <p class="section-subtitle">全方位的AI驱动解决方案</p>
      </div>
      <div class="products-grid">
        
        <div class="product-card clickable-card" @click="navigateToEnterprisePlatform">
          <div class="product-icon">
            <i class="fas fa-project-diagram"></i>
          </div>
          <h3>知识图谱</h3>
          <p>构建"技术-人才-企业"关系网，实现语义级精准匹配。（点击卡片查看详情）</p>
          <ul class="product-features">
            <li>关系网络构建</li>
            <li>语义级匹配</li>
            <li>智能推荐</li>
          </ul>
          <div class="card-hover-indicator">
            <i class="fas fa-arrow-right"></i>
          </div>
        </div>
        <div class="product-card">
          <div class="product-icon">
            <i class="fas fa-code"></i>
          </div>
          <h3>AI代码审计</h3>
          <p>利用CodeBERT分析提交代码，输出可维护性/性能评分。</p>
          <ul class="product-features">
            <li>代码质量分析</li>
            <li>性能评估</li>
            <li>可维护性评分</li>
          </ul>
        </div>
        <div class="product-card clickable-card" @click="navigateToTeamCollaboration">
          <div class="product-icon">
            <i class="fas fa-users"></i>
          </div>
          <h3>团队协作挑战</h3>
          <p>组队共同挑战任务，根据贡献比值分配勋章/证书，促进团队合作与技能提升。（点击卡片查看详情）</p>
          <ul class="product-features">
            <li>团队任务匹配</li>
            <li>贡献度评估</li>
            <li>协作勋章分配</li>
          </ul>
          <div class="card-hover-indicator">
            <i class="fas fa-arrow-right"></i>
          </div>
        </div>
        <div class="product-card">
          <div class="product-icon">
            <i class="fas fa-link"></i>
          </div>
          <h3>区块链存证</h3>
          <p>通过Arweave永久存储项目，生成不可篡改的NFT勋章。</p>
          <ul class="product-features">
            <li>永久存储</li>
            <li>NFT勋章</li>
            <li>不可篡改</li>
          </ul>
        </div>
        
      </div>
      
    </div>
  </section>
</template>

<script>

export default {
  name: 'ProductsSection',
  methods: {
    navigateToTeamCollaboration() {
      this.$router.push('/team-collaboration')
    },
    navigateToEnterprisePlatform() {
      this.$router.push('/enterprise-platform')
    }
  }
}
</script>

<style scoped>
.products {
  background: rgba(255, 255, 255, 0.02);
  padding: 120px 0;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 40px 20px;
  border-radius: 24px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.2rem;
  color: white;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.product-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.2);
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 212, 255, 0.2);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.product-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.1), transparent);
  transition: left 0.5s;
}

.product-card:hover::before {
  left: 100%;
}

.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.4);
  border-color: rgba(0, 212, 255, 0.5);
}

.clickable-card {
  cursor: pointer;
  position: relative;
}

.clickable-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.4);
  border-color: rgba(0, 212, 255, 0.5);
}

.card-hover-indicator {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  background: rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.clickable-card:hover .card-hover-indicator {
  opacity: 1;
  background: rgba(0, 212, 255, 0.8);
}

.card-hover-indicator i {
  color: white;
  font-size: 0.8rem;
}

.product-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(45deg, #00d4ff, #5b73e8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  position: relative;
  animation: iconFloat 3s ease-in-out infinite;
}

.product-icon::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border-radius: 50%;
  background: linear-gradient(45deg, #00d4ff, #5b73e8);
  opacity: 0.3;
  animation: iconGlow 2s infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-5px); }
}

@keyframes iconGlow {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.1); opacity: 0.6; }
}

.product-icon i {
  font-size: 2rem;
  color: white;
  position: relative;
  z-index: 1;
}

.product-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: 600;
}

.product-card p {
  color: white;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.product-features {
  list-style: none;
  text-align: left;
}

.product-features li {
  padding: 0.5rem 0;
  color: white;
  position: relative;
  padding-left: 1.5rem;
}

.product-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00d4ff;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .product-card {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .product-card {
    padding: 1rem;
  }
}
</style>
